{% extends "base.html" %}
{% block main %}

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">求解</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">主页<span class="sr-only">(current)</span></a></li>
            <li><a href="#">xxxx</a></li>

          </ul>
          <form class="navbar-form navbar-left">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">搜索</button>
          </form>
          <!-- <ul class="nav navbar-nav navbar-right">
            <li><a href="#">登录</a></li>
            <li><a href="#">注册</a></li>
          </ul> -->
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

    <div id="qiujieHead" class="q-container qiujie-head">
        <div class="container q-container-inner">
            <div class="row q-head">
                <br/>
                <br/>
                <br/>
                <br/>
                <br/>
                <br/>
                <p class="title">求解</p>
                <p class="content">致力于解决中小型外包问题</p>
                <br/>
                <br/>
                <br/>
                <a class="button" href="/service-list?class=all" >查看更多</a>
            </div>
        </div>
    </div>
    
    
    <div id="qiujieHot" class="q-container qiujie-hot q-container-grey">
        <div class="container q-container-inner">
            <div class="row q-hot">
                 {% for hotClassTab in ui.hotClassTabs %}                
                <a class="q-hot-item col-md-3" href="{{ hotClassTab.url }}">
                    <div class="title">{{ hotClassTab.title }}</div>
                    <div class="title2">{{ hotClassTab.title2 }}</div>
                    <img class="pic" src="{{ hotClassTab.pic }}">
                </a>
                {% endfor %}
            </div>
        </div>
    </div>
    

    <div id="qiujieServiceClass" class="q-container qiujie-service-class">
        <div class="container q-container-inner">
            <div class="row q-row-head">
                <h2 class="q-title">我们提供的服务</h2>
            </div>
            <div class="row q-service-class">
                    
                <div class="col-md-4">
                    <a class="q-service-tab active" href="{{ ui.classTab.url.web }}">网站建设</a>
                </div>
                <div class="col-md-4">
                    <a class="q-service-tab" href="{{ ui.classTab.url.media }}">视频图像</a>
                </div>
                <div class="col-md-4">
                    <a class="q-service-tab" href="{{ ui.classTab.url.text }}">文案新闻</a>
                </div>
                
            </div>
        </div>
    </div>

    <div id="qiujieService" class="q-container qiujie-service q-container-grey">
        <div class="container q-container-inner">
            <div class="row q-service-plane">
                
                 {% for service in services %}
                <a class="col-md-3 col-sm-4 col-xs-6" href="{{ service.url }}">
                    <div class="q-service-card">
                        <img class="pic" src="{{ service.preview }}">
                        <div class="top-line">
                            <h3>{{ service.price }}</h3>
                        </div>
                        <div class="name">
                            <sapn>{{ service.title }}</sapn>
                        </div>
                        <div class="class"></div>
                        <div class="studio"></div>
                        <div class="contact"></div>
                    </div>
                </a>
                {% endfor %}

            </div>
        </div>
    </div>

    <div id="qiujieStudio" class="q-container qiujie-studio">
        <div class="container q-container-inner">
            <div class="row q-row-head">
                <h2 class="q-title">入驻的工作室</h2>
            </div>
            <div class="row q-studio-plane">
                 {% for studio in studios %}
                <div class="col-md-3 col-sm-4 col-xs-6">
                    <div class="q-studio-card">
                        <a href="{{ studio.url }}"><img class="pic" src="{{ studio.preview }}"></a>
                    </div>
                </div>
                 {% endfor %} 
            </div>
        </div>
    </div>
{% endblock %}